<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <style>
      #main {
        border: 1px solid #000;
      }
    </style>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="../lib/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 800px; height: 400px"></div>

    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector('#main'))

      // 指定图表的配置项和数据
      var option = {
        // 标题
        title: {
          text: '美食排行',
          textStyle: {
            color: 'deeppink',
            fontSize: 60,
          },
          subtext: '西兰花排行!!',
          // show: false,
        },
        // 提示框
        tooltip: {
          show: false,
        },
        // 图例组件 控制某个图表是否显示
        legend: {
          data: ['价格'],
          show: false,
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'yellow', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'red', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        ],
        // 图表绘制位置的设置
        grid: {
          left: '30%',
          top: '50%',
        },
        // x轴的设置
        xAxis: {
          data: ['西兰花炒蛋', '盐焗西兰花', '白灼西兰花', '清蒸西兰花', '西兰花炒花菜', '麻辣西兰花'],
          axisLine: {
            // show: false,
            lineStyle: {
              color: 'skyblue',
              width: 10,
              type: 'dashed',
            },
          },
          axisLabel: {
            fontSize: 10,
          },
        },
        yAxis: {
          axisLine: {
            // show: false,
            lineStyle: {
              color: 'red',
              width: 10,
              type: 'dashed',
            },
          },
          axisLabel: {
            fontSize: 20,
          },
        },
        // 设置图表的类型 及内容
        series: [
          {
            name: '价格',
            type: 'line',
            data: [998, 520, 536, 610, 710, 820],
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    </script>
  </body>
</html>
